<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lee-gantt demo</title>
    <link href="css/lee-gantt.css" rel="stylesheet" />
</head>

<body>

    <div id="gantt-box" style="border:1px solid #ddd;height: 400px;"></div>

    <button onclick="resetGantt()">重置</button>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/lee-gantt.js"></script>
<script>
    function resetGantt() {
        $("#gantt-box").gantt({
            data: [{
                id: '1',
                title: '超级任务',
                desc: '任务备注啊',
                values: [
                    {
                        startDate: '2023-01-03',
                        endDate: '2023-01-12',
                        progress: 90,
                        label: '任务第一计划',
                        skin: 'danger'
                    }
                ]
            }]
        });
    }
    $(function () {
        $("#gantt-box").gantt({
            title: 'xxx项目任务甘特图',
            leftWidth: 250,
            staticStartDate:'2023-01-20',
            staticEndDate:'2023-05-20',
            onItemClick: function (data) {
                console.info('你点击了任务信息：', data);
            },
            onItemTitleClick: function (data) {
                console.info('你点击了任务标题信息：', data);
            },
            onColumnClick: function (data) {
                console.info('你点击了格子：', data);
            },
            onLoadFinish: function () {
                console.info('插件加载完成！');
            },
            data: [{
                id: '1',
                title: '超级任务',
                desc: '任务备注啊',
                values: [
                    {
                        startDate: '2023-02-03',
                        endDate: '2023-04-04',
                        label: '测试任务哎',
                        toolTip:'鼠标放这里它就会出现提示',
                        skin: 'primary'
                    }, {
                        startDate: '2023-02-01',
                        endDate: '2023-02-12',
                        label: '哎哎哎',
                        skin: 'primary'

                    }
                ]
            }]
        });
    });
</script>

</html>